<template>
  <div class="home-container">
    <van-nav-bar fixed>
      <!-- <van-field   round   placeholder="请输入用户名" /> -->
      <van-search
        @focus="focusSearch"
        slot="title"
        shape="round"
        input-align="center"
        background="transparent"
        placeholder="搜索"
      />
    </van-nav-bar>
    <!-- 主体内容 -->
    <div>
      <!-- 导航 -->
      {{active}}
      <van-tabs v-model="active" swipeable>
        <van-tab v-for="(channels,index) in channelsList" :key="index" :title="channels.name">
          <!-- 下拉组件 -->
          <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
              <van-cell v-for="item in newsList" :key="item.art_id" :title="item.title">
                <template #label>
                  <span class="custom-title">{{item.aut_name}}</span>
                  <van-tag type="danger">{{item.like_count}}</van-tag>
                  <span type="danger">{{item.pubdate}}</span>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>-->
          <article-list :channels="channels"></article-list>
          <!-- 下拉组件 -->
        </van-tab>
        <div slot="nav-right" class="placeholder"></div>
        <div @click="show=true" class="hanb" slot="nav-right">
          <van-icon name="points"/>
        </div>
      </van-tabs>
    </div>
    <!-- 弹出层 -->
    <van-popup
      closeable
      close-icon-position="top-left"
      v-model="show"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <article-edit @father="editHandle" :myChannels="channelsList" :activeIndex="active"></article-edit>
    </van-popup>
  </div>
</template>
           
<script>
import articleList from './components/article-list.vue'
import articleEdit from './components/article-edit.vue'
import { channels_api } from '@/api/channels.js'

import { mapState } from 'vuex'

import { GET_TOKEN } from '@/utils/storage.js'
export default {
  data() {
    return {
      active: 0,
      channelsList: [],
      show: false

      /* 下拉加载 */
      // count: 0,
      // isLoading: false,
      // loading: false,
      // finished: false
    }
  },
  created() {
    //获取屏幕  用户
    this.getChannel()

    //获取列表
  },
  methods: {
    left() {
      this.$router.push('/my')
    },
    //  搜索栏聚焦
    focusSearch() {
      this.$router.push('/search')
    },

    /* 获取频道 */
    async getChannel() {
      //  是否登录
      if (this.user) {
        try {
          const { data: res } = await channels_api()
          console.log(res, 33333)
          this.channelsList = res.data.channels
        } catch (err) {
          console.log(err, 555)
        }
        /* 
         
         登录：
            发送请求   
            发送 ：添加 +  删除
         */
      } else {
        console.log(11111);
        var storage = GET_TOKEN('channelsMy')
        if (storage) {
          this.channelsList = storage
        } else {
          const { data: res } = await channels_api()
          //console.log(res, 33333)
          this.channelsList = res.data.channels
        }
        /* 
          未登录：
            做本地缓存*/
        // SET_TOKEN('channelsMy',this.myChannels)
      }
    },

    //点击编辑按钮中的频道
    editHandle(index, flagIndex) {
      console.log(index, 8888)

      this.show = flagIndex
      if (flagIndex) {
        this.active = this.active - 1
      } else {
        this.active = index
      }
    }
  },
  computed:{
    ...mapState(['user']),
  },
  components: {
    articleList,
    articleEdit
  }
}
</script>
<style scoped lang='less'>
.home-container {
  padding: 180px 0 90px;
  .van-nav-bar {
    .van-search__content {
      background-color: rgba(255, 255, 255, 0.2);
      /deep/i.van-icon {
        color: #fff;
        left: 130px;
      }
    }

    ::placeholder {
      color: #fff;
    }
  }

  .van-tabs {
    //  头部导航
    /deep/.van-tabs__wrap {
      position: fixed;
      top: 90px;
      z-index: 999;
      width: 100%;
    }
    /deep/.van-tab {
      border-right: 1px solid #edeff3;
      min-width: 200px;
      font-size: 30px;
      color: #777777;
      padding: 0 20px;
    }
    /deep/.van-tabs__line {
      width: 31px !important;
      height: 6px;
      background-color: #3296fa;
    }

    .hanb {
      position: fixed;
      right: 0;
      top: 92px;
      width: 66px;
      height: 82px;
      z-index: 999;
      transform: translateY(20%);
      font-size: 60px;
    }
    .placeholder {
      width: 66px;
      height: 82px;
      flex-shrink: 0;
    }
  }

  //  遮罩
  .van-popup {
  }
}
</style>